<%--
  Created by IntelliJ IDEA.
  User: 18318
  Date: 2022/7/7
  Time: 11:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common.jsp" %>
<%--mht报表统计--%>
<html>
<head>
    <title>mht报表统计</title>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM，必须定义宽高才可以显示 -->
<div style="width: 100%;height: 100%;" id="shopping"></div>
</body>
<script type="text/javascript">
    layui.config({
        version: 1,
        base: 'echarts/' //这个就是你放Echart.js的目录
    }).use(['element', 'echarts', 'carousel'], function () {
        var element = layui.element,
            $ = layui.jquery,
            carousel = layui.carousel,
            echarts = layui.echarts;
        $.ajax({
            url: "${pageContext.request.contextPath}/viewTestResultMht/queryResultToReport.do",
            dataType: "json",
            type: "post",
            success: function (re) {

                var shopping = echarts.init(document.getElementById('shopping'), 'dark');

                var option = {
                    title: {
                        text: 'Mht心理健康测试',
                        subtext: '测试人数：' + (re.data.sumpeople),
                        left: 'left'
                    },
                    tooltip: {},
                    legend: {
                        top: 'bottom',
                        data: ['分数']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    //下面是折线图用的
                    xAxis: {
                        type: 'category',
                        data: ['学习焦虑', '对人焦虑', '孤独倾向', '自责倾向', '过敏倾向', '身体症状', '恐怖倾向', '冲动倾向']
                    },
                    yAxis: {
                        type: 'value',
                        gridIndex: 0
                    },
                    grid: {top: '45%'},

                    series: [
                        //基础南丁格尔玫瑰图
                        {
                            name: 'Nightingale Chart',
                            type: 'pie',
                            radius: [50, 120],
                            center: ['50%', '25%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: [
                                { value: re.data.studyanxiety, name: '学习焦虑' },
                                { value: re.data.peopleanxiety, name: '对人焦虑' },
                                { value: re.data.feelalone, name: ' 孤独倾向' },
                                { value: re.data.feelremorse, name: ' 自责倾向' },
                                { value: re.data.feelallergic, name: '过敏倾向 ' },
                                { value: re.data.body, name: ' 身体症状' },
                                { value: re.data.feelterror, name: '恐怖倾向 ' },
                                { value: re.data.easyimpulse, name: ' 冲动倾向' }
                            ]
                        }

                        // 折线图
                        ,{
                            name: '分数',
                            data: [re.data.studyanxiety,re.data.peopleanxiety,re.data.feelalone,re.data.feelremorse, re.data.feelallergic,re.data.body,re.data.feelterror,re.data.easyimpulse],
                            type: 'line',
                            symbolSize: 10,
                            lineStyle: {
                                color: '#39c5bb',
                                width: 2,
                            },
                            itemStyle: {
                                color: '#66ccff'
                            },
                            smooth: true
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                shopping.setOption(option);
            }
        })
    });


</script>
</html>
